<template>
  <div class="edit-popup">
    <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="700px"
            @confirm="handleSubmit"
            @close="handleClose"
    >
      <el-form
              :disabled="false"
              ref="formRef"
              :model="formData"
              :rules="formRules"
      >
        <el-form-item label="频道名称" prop="name" >
          <el-input v-model="formData.name" placeholder="请输入等级名称" />
        </el-form-item>
        <el-form-item label="频道封面" prop="cover">
          <div class="flex flex-col gap-2">
            <el-image style="width: 100px; height: 100px" :src="formData.cover" />
            <upload
                    class="mr-3"
                    :type="'image'"
                    :show-progress="true"
                    @change="actionImg"
                    ref="myref"
            >
              <el-button type="primary">本地上传</el-button>
            </upload>
          </div>
<!--          <material-picker :limit="1" v-model="formData.cover" />-->
        </el-form-item>
        <el-form-item label="频道描述" prop="introduction" >
          <el-input v-model="formData.introduction" placeholder="请输入升级金额" />
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
  import type { FormInstance } from "element-plus";
  import {
    editChannel,
    addChannel,
    detailChannel,
  } from "@/api/live";
  import Popup from "@/components/popup/index.vue";
  const emit = defineEmits(["success", "close"]);
  const formRef = shallowRef<FormInstance>();
  const popupRef = shallowRef<InstanceType<typeof Popup>>();
  const myref = ref(null)
  const mode = ref("add");
  const popupTitle = computed(() => {
    return mode.value == "edit" ? "编辑频道" : "添加频道";
  });

  interface TsObj {
    channel_id: string,
    name: string,
    cover: string,
    introduction: string,
  }


  const formData:TsObj = reactive({
    channel_id:'',
    name: "",
    cover: "",
    introduction:'',
  });

  const formRules = {
    name: [
      {
        required: true,
        message: "请输入频道名称",
        trigger: "blur",
      },
    ],
    cover: [
      {
        required: true,
        message: "请上传频道封面",
        trigger: "blur",
      },
    ],
    introduction: [
      {
        required: true,
        message: "请输入频道描述",
        trigger: "blur",
      },
    ],
  };

  const open = (type: string, _id?: string, ) => {
    formData.channel_id = _id || '';
    mode.value = type;
    popupRef.value?.open();
  };

  const setFormData = (data: Record<any, any>) => {
    for (const key in formData) {
      if (data.info.hasOwnProperty(key)) {
        formData[key] = data.info[key];
      }
    }
  };

  const getDetail = async (row: Record<string, any>) => {
    const data = await detailChannel({
      channel_id: formData.channel_id,
    });
    setFormData(data);
  };

  // 照片更新
  const actionImg = async () => {
    formData.cover = myref.value.fileList[0].response.data.url;
  };


  const handleClose = () => {
    emit("close");
  };

  defineExpose({
    open,
    setFormData,
    getDetail,
  });
  //提交
  const handleSubmit = async () => {
    await formRef.value?.validate();
    mode.value == "edit"
            ? await editChannel(formData)
            : await addChannel(formData);
    popupRef.value?.close();
    emit("success");
  };
</script>
